<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}Medical Device Regulatory Knowledge Base{% endblock %}</title>
    
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    
    <!-- Inter Font -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <style>
        body {
            font-family: 'Inter', sans-serif;
        }
        
        .sidebar {
            width: 280px;
        }
        
        .main-content {
            margin-left: 280px;
        }
        
        .citation-chip {
            background-color: #e0e7ff;
            color: #3730a3;
            padding: 2px 8px;
            border-radius: 12px;
            font-size: 12px;
            cursor: pointer;
        }
        
        .citation-chip:hover {
            background-color: #c7d2fe;
        }
        
        /* Active state */
        .nav-item.active {
            background-color: #f3f4f6;
            color: #4f46e5;
        }
        
        .nav-item.active i {
            color: #4f46e5;
        }
        
        /* Custom prose styles for markdown rendering */
        .prose {
            color: #374151;
            max-width: none;
        }
        .prose h1 {
            font-size: 1.5em;
            font-weight: 700;
            margin-top: 0.5em;
            margin-bottom: 0.5em;
            color: #111827;
        }
        .prose h2 {
            font-size: 1.25em;
            font-weight: 600;
            margin-top: 0.75em;
            margin-bottom: 0.5em;
            color: #1f2937;
        }
        .prose h3 {
            font-size: 1.125em;
            font-weight: 600;
            margin-top: 0.5em;
            margin-bottom: 0.5em;
            color: #374151;
        }
        .prose p {
            margin-top: 0.75em;
            margin-bottom: 0.75em;
            line-height: 1.75;
        }
        .prose ul, .prose ol {
            margin-top: 0.75em;
            margin-bottom: 0.75em;
            padding-left: 1.5em;
        }
        .prose li {
            margin-top: 0.25em;
            margin-bottom: 0.25em;
        }
        .prose ul {
            list-style-type: disc;
        }
        .prose ol {
            list-style-type: decimal;
        }
        .prose strong {
            font-weight: 600;
            color: #111827;
        }
        .prose em {
            font-style: italic;
        }
        .prose code {
            background-color: #f3f4f6;
            padding: 0.125rem 0.25rem;
            border-radius: 0.25rem;
            font-size: 0.875em;
            font-family: monospace;
        }
        .prose pre {
            background-color: #1f2937;
            color: #f9fafb;
            padding: 1rem;
            border-radius: 0.5rem;
            overflow-x: auto;
            margin-top: 1em;
            margin-bottom: 1em;
        }
        .prose pre code {
            background-color: transparent;
            padding: 0;
            color: inherit;
        }
        .prose blockquote {
            border-left: 4px solid #e5e7eb;
            padding-left: 1rem;
            font-style: italic;
            color: #6b7280;
            margin-top: 1em;
            margin-bottom: 1em;
        }
        .prose a {
            color: #4f46e5;
            text-decoration: underline;
        }
        .prose a:hover {
            color: #4338ca;
        }
        .prose table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 1em;
            margin-bottom: 1em;
        }
        .prose th {
            background-color: #f3f4f6;
            padding: 0.5rem;
            text-align: left;
            font-weight: 600;
            border: 1px solid #e5e7eb;
        }
        .prose td {
            padding: 0.5rem;
            border: 1px solid #e5e7eb;
        }
    </style>
</head>
<body class="bg-gray-50 min-h-screen">
    <!-- Sidebar -->
    <div class="sidebar fixed inset-y-0 left-0 bg-white border-r border-gray-200 flex flex-col">
        <!-- Logo -->
        <div class="p-6 border-b border-gray-200">
            <div class="flex items-center space-x-3">
                <div class="w-8 h-8 bg-indigo-600 rounded-lg flex items-center justify-center">
                    <i class="fas fa-heartbeat text-white text-sm"></i>
                </div>
                <div>
                    <h1 class="font-semibold text-gray-900">Medical Device</h1>
                    <p class="text-sm text-gray-500">Regulatory KB</p>
                </div>
            </div>
        </div>
        
        <!-- Navigation -->
        <nav class="flex-1 p-4">
            <div class="space-y-2">
                <a href="/" class="nav-item flex items-center space-x-3 px-3 py-2 text-gray-700 hover:bg-gray-100 rounded-lg {% if request.path == '/' %}active{% endif %}">
                    <i class="fas fa-home w-5"></i>
                    <span>Home</span>
                </a>
                <a href="/chat" class="nav-item flex items-center space-x-3 px-3 py-2 text-gray-700 hover:bg-gray-100 rounded-lg {% if request.path == '/chat' %}active{% endif %}">
                    <i class="fas fa-comments w-5"></i>
                    <span>Chat</span>
                </a>
                <a href="/documents" class="nav-item flex items-center space-x-3 px-3 py-2 text-gray-700 hover:bg-gray-100 rounded-lg {% if request.path == '/documents' %}active{% endif %}">
                    <i class="fas fa-file-alt w-5"></i>
                    <span>Documents</span>
                </a>
                <a href="/collections" class="nav-item flex items-center space-x-3 px-3 py-2 text-gray-700 hover:bg-gray-100 rounded-lg {% if request.path == '/collections' %}active{% endif %}">
                    <i class="fas fa-folder-open w-5"></i>
                    <span>Collections</span>
                </a>
                <a href="/fda-analysis" class="nav-item flex items-center space-x-3 px-3 py-2 text-gray-700 hover:bg-gray-100 rounded-lg {% if request.path == '/fda-analysis' %}active{% endif %}">
                    <i class="fas fa-chart-line w-5"></i>
                    <span>FDA Analysis</span>
                </a>
            </div>
            
            <!-- Collections Section -->
            <div class="mt-8">
                <h3 class="px-3 text-xs font-semibold text-gray-500 uppercase tracking-wider">Collections</h3>
                <div class="mt-2 space-y-1">
                    <a href="/collections?filter=FDA" class="flex items-center space-x-3 px-3 py-2 text-gray-700 hover:bg-gray-100 rounded-lg">
                        <span class="w-2 h-2 bg-blue-500 rounded-full"></span>
                        <span class="text-sm">FDA</span>
                    </a>
                    <a href="/collections?filter=NMPA" class="flex items-center space-x-3 px-3 py-2 text-gray-700 hover:bg-gray-100 rounded-lg">
                        <span class="w-2 h-2 bg-red-500 rounded-full"></span>
                        <span class="text-sm">NMPA</span>
                    </a>
                    <a href="/collections?filter=PMDA" class="flex items-center space-x-3 px-3 py-2 text-gray-700 hover:bg-gray-100 rounded-lg">
                        <span class="w-2 h-2 bg-green-500 rounded-full"></span>
                        <span class="text-sm">PMDA</span>
                    </a>
                    <a href="/collections?filter=ANVISA" class="flex items-center space-x-3 px-3 py-2 text-gray-700 hover:bg-gray-100 rounded-lg">
                        <span class="w-2 h-2 bg-purple-500 rounded-full"></span>
                        <span class="text-sm">ANVISA</span>
                    </a>
                </div>
            </div>
        </nav>
    </div>

    <!-- Main Content -->
    <div class="main-content flex-1 flex flex-col min-h-screen">
        <!-- Top Bar -->
        <header class="bg-white border-b border-gray-200">
            <div class="flex items-center justify-between px-8 py-4">
                <!-- Search Bar -->
                <div class="flex-1 max-w-2xl">
                    <div class="relative">
                        <input 
                            type="text" 
                            id="searchInput"
                            placeholder="Search documents, questions, or topics..."
                            class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
                        >
                        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                            <i class="fas fa-search text-gray-400"></i>
                        </div>
                    </div>
                </div>
                
                <!-- User Menu -->
                <div class="flex items-center space-x-4">
                    <button class="p-2 text-gray-500 hover:text-gray-700 relative">
                        <i class="fas fa-bell text-lg"></i>
                        <span class="absolute top-1 right-1 w-2 h-2 bg-red-500 rounded-full"></span>
                    </button>
                    <div class="w-8 h-8 bg-indigo-600 rounded-full flex items-center justify-center">
                        <i class="fas fa-user text-white text-sm"></i>
                    </div>
                </div>
            </div>
        </header>

        <!-- Page Content -->
        <main class="flex-1 p-8">
            {% block content %}{% endblock %}
        </main>
    </div>

    <script>
        // Global search functionality
        document.getElementById('searchInput').addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                const query = this.value.trim();
                if (query) {
                    window.location.href = `/documents?search=${encodeURIComponent(query)}`;
                }
            }
        });
    </script>
    
    {% block scripts %}{% endblock %}
</body>
</html>